<template>
  <div class="pf-workbench">
    <div class="pf-workbench-tip">{{ tip }}，{{ user?.name }}</div>
    <div class="pf-workbench-class pf-m-10">
      <span class="pf-workbench-class-title">今日课程</span>
      <pf-table class="pf-mt-10" :config="tableConfig" :data="tableData">
        <el-table-column label="操作" fixed="right" width="80">
          <template #default="scope">
            <el-tooltip effect="light" placement="left" trigger="hover">
              <component :is="'Menu'" class="el-button--text" style="width: 18px"></component>
              <template #content>
                <div class="pf-flex pf-flex-column pf-flex-0">
                  <el-button @click="handleClick(scope.row, 'edit')" link type="primary" size="mini"
                    >编辑</el-button
                  >
                  <el-button @click="handleClick(scope.row, 'over')" link type="primary" size="mini"
                    >结束课程</el-button
                  >
                </div>
              </template>
            </el-tooltip>
          </template>
        </el-table-column>
      </pf-table>
    </div>
    <div id="student-total-charts" class="pf-charts pf-student-total pf-mt-20"></div>
    <div id="student-location-charts" class="pf-charts pf-student pf-mt-20">
      <el-empty description="功能建设中"></el-empty>
    </div>
    <div class="pf-workbench-calendar pf-mt-20">
      <el-calendar>
        <template v-slot:dateCell="{ data }">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split('-').slice(2).join('') }}
            {{ data.isSelected ? '✔️' : '' }}
          </p>
        </template>
      </el-calendar>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref, Ref } from 'vue';

import { emptyTable, TableModel, useAuth, useData, useHttpClient } from 'pf-component';
import * as echarts from 'echarts';
import { useStudentLocationCharts } from '@/views/workbench/useStudentLocationCharts';
import { useStudentTotalCharts } from '@/views/workbench/useStudentTotalCharts';
import { useNotice } from '@/components/element-plus/notice';
import { TableNameEnum } from '@/constants/enum/table-name.enum';
import { useCourse } from '@/views/teach/course/useCourse';
import store from '@/store';

export default defineComponent({
  name: 'Workbench',
  setup() {
    const { message } = useNotice();
    const user = computed(() => {
      return store.getters.userInfo;
    });
    const today = new Date();
    const tip = today.getHours() > 12 ? (today.getHours() > 18 ? '晚上好' : '下午好') : '上午好';
    onMounted(() => {
      const studentLocationDom = document.getElementById('student-location-charts');
      const studentTotalDom = document.getElementById('student-total-charts');
      const studentTotalChart = studentTotalDom && echarts.init(studentTotalDom);
      const studentLocationChart = studentLocationDom && echarts.init(studentLocationDom);
      studentTotalChart?.setOption(useStudentTotalCharts().option);
      studentLocationChart?.setOption(useStudentLocationCharts().option);
    });

    const tableConfig: Ref<TableModel> = ref(emptyTable);
    const tableData: Ref<any[]> = ref([]);
    onMounted(() => {
      Promise.all([
        useData().loadTable([{ name: TableNameEnum.dcCourse, config: tableConfig }])
      ]).then(ress => {
        if (ress.findIndex(res => !res) === -1) {
          useCourse()
            .listByCurrentDay()
            .then(res => {
              if (res) tableData.value.push(...res);
              else tableData.value = [];
            });
        }
      });
    });
    const handleClick = (datay: any, cmd: string) => {
      switch (cmd) {
        case 'edit':
          console.log(cmd);
          break;
        case 'over':
          console.log(cmd);
          break;
        default:
          message.error('未定义的操作！');
      }
    };
    return {
      user,
      today,
      tip,
      tableConfig,
      tableData,
      handleClick
    };
  }
});
</script>

<style scoped lang="scss">
.#{$prefix} {
  &-workbench {
    background: white;
    &-tip {
      padding: 20px;
    }
    &-calendar {
      :deep(.el-calendar-table .el-calendar-day) {
        height: 50px;
      }
    }
    &-class {
      &-title {
        font-family: 'Matura MT Script Capitals';
        font-weight: bold;
      }
    }
  }
  &-charts {
    height: 300px;
    padding: 10px;
  }
  &-student-total {
  }
  &-student {
  }
}
</style>
